<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/build/css/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/my-style.css">
    <link rel="stylesheet" type="text/css" href="/ztree/3.5/css/metro/zTreeStyle.css"/>
</head>
<style>
    font{
        display: none;
    }
    .layui-input-block {
        margin-left: 150px;
    }

    .layui-form-label {
        width: 110px;
    }
</style>
<body>
<!-- 弹框content -->
<div id="modal-content1" style="padding:20px;">
    <form class="layui-form" id="form-role-edit" action="">
        <input type="hidden" id="roleId" th:value="${role.getId()}">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称<span
                    style="color: red">★</span>：</label>
            <div class="layui-input-block">
                <input type="text" name="roleName" required lay-verify="required"
                       placeholder="请输入项目名"
                       autocomplete="off" class="layui-input"
                       th:value="${role.getRoleName()}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色代码<span
                    style="color: red">★</span>：</label>
            <div class="layui-input-block">
                <input type="text" name="roleKey" required lay-verify="required"
                       placeholder="请输入项目名"
                       autocomplete="off" class="layui-input"
                       th:value="${role.getRoleKey()}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">菜单权限<span
                    style="color: red">★</span>：</label>
            <div class="layui-input-block" style="width: 310px;height: 200px;overflow-y: scroll">
                <div id="menuTrees" class="ztree"></div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入内容" id="remark"
                          class="layui-textarea" th:text="${role.remark}"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="/plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../static/js/jquery.min.js"
        th:src="@{/js/jquery.min.js}"></script>
<script src="/ztree/3.5/js/jquery.ztree.all-3.5.js"></script>
<script>
    // 树结构初始化加载
    var setting = {
        check: {enable: true, nocheckInherit: true, chkboxType: {"Y": "ps", "N": "ps"}},
        view: {selectedMulti: false, nameIsHTML: true},
        data: {simpleData: {enable: true}, key: {title: "title"}},
        callback: {
            beforeClick: function (treeId, treeNode, clickFlag) {
                var menuTrees = $.fn.zTree.getZTreeObj(treeId);
                menuTrees.checkNode(treeNode, !treeNode.checked, true, true);
                return false;
            }
        }
    }, menuTrees, loadTree = function () {
        $.get("/system/resource/roleResourceTreeData?id=" + $("#roleId").val(), function (data) {
            menuTrees = $.fn.zTree.init($("#menuTrees"), setting, data); //.expandAll(true);
        }, null, null, "正在加载，请稍后...");
    };
    loadTree();
</script>

<script>
    // 增加项目表单
    layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchStatus)', function (data) {
            this.value = this.checked ? "0" : "1";
        });


        var $ = layui.$;
        //监听提交

        form.on('submit(formDemo)', function (data) {
            var menuIds = selectCheckeds();
            // data.field.status = data.field.status ? "0" : "1";
            if (menuIds == '' || menuIds == null || menuIds == undefined) {
                layer.msg('请选择菜单权限！');
                return false;
            }
            $.ajax({
                type: 'PUT',
                url: "/system/role/update/" + $("#roleId").val() + "?menuIds=" + menuIds,
                data: data.field,
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg("修改成功",{
                            time: 800
                        },function () {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);//页面刷新
                            window.parent.location = "/system/role/view";//页面刷新
                        });
                    } else {
                        layer.msg("修改失败" + res.msg);
                    }
                }
            });
            return false;
        });

    });

    function selectCheckeds() {
        var menuIds = "";
        var treeNodes = menuTrees.getCheckedNodes(true);
        for (var i = 0; i < treeNodes.length; i++) {
            if (0 == i) {
                menuIds = treeNodes[i].id;
            } else {
                menuIds += ("," + treeNodes[i].id);
            }
        }
        return menuIds;
    }
</script>
</body>
</html>